/*页面变量*/
$icon_color1:#0067a6;
$icon_color2:#efc028;
$icon_color3:#008972;
$icon_color4:#00abd8;
$icon_color5:#f2572d;
$icon_color6:#bead92;
$icon_color7:#f35a4a;
$icon_color8:#a2ef54;
$icon_color9:#f26378;
/*字体*/
body,textarea,input,button,select,keygen,legend{font:12px/1.14 'Microsoft YaHei',arial,\5b8b\4f53;color:#333;outline:0;}
/*头部统计信息*/
.top-info-box{
  padding:30px 0;
  background:#434f5b;
  color:#fff;
  margin-bottom:20px;
  &:after{
    display:block;content:'';height:0;overflow:hidden;clear:both;
  }
  .info-item{
    width:33.33%;
    float:left;
    display:block;
    font-size:14px;
    text-align:center;
    color:#fff;
    position: relative;
    .num{
      display:block;
      padding:8px;
      font-size:24px;
      line-height:40px;
      overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
      .unit{
        font-size:12px;
      }
    }
    &:after{
      content:'';
      display:block;
      width:0;
      height:60px;
      border-right:1px solid #333;
      position:absolute;
      left:0;top:10px;
    }
  }
}
/*九宫格*/
.lattice-9{
  position:relative;
  padding:0;
  margin: 0;
  height:auto;
  background:#fff;
  border-top:1px solid #e8e8e8;
  &:after{
    display:block;content:'';height:0;overflow:hidden;clear:both;
  }
  .item{
    display:block;
    width:33.333333%;
    height:33vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:1px solid #e8e8e8;
    border-width:0 1px 1px 0;
    float:left;
    padding:6vw;
    text-align:center;
    position:relative;
    overflow: hidden;
    .iconfont{
      font-size:32px;
      line-height:12vw;
    }
    .text{
      font-size:14px;
      color:#989898;
      line-height:8vw;
      overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
    }
    .corner{
      position:absolute;
      right:0;
      top:0;
      .num{
        font-size:13px;
        color:#fff;
        position:relative;
        z-index:1;
        display:block;
        width:25px;
        text-align:center;
      }
      &:after{
        display:block;
        content:'';
        width:60px;
        height:30px;
        background:#ff0000;
        position: absolute;
        top:-10px;
        right:-20px;
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); 	/* IE 9 */
        -moz-transform:rotate(45deg); 	/* Firefox */
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -o-transform:rotate(45deg); 	/* Opera */
      }
    }
    &:nth-child(3n){border-right:none;}
  }
  .icon-color-1{ .iconfont{  color:$icon_color1 } }
  .icon-color-2{ .iconfont{  color:$icon_color2 } }
  .icon-color-3{ .iconfont{  color:$icon_color3 } }
  .icon-color-4{ .iconfont{  color:$icon_color4 } }
  .icon-color-5{ .iconfont{  color:$icon_color5 } }
  .icon-color-6{ .iconfont{  color:$icon_color6 } }
  .icon-color-7{ .iconfont{  color:$icon_color7 } }
  .icon-color-8{ .iconfont{  color:$icon_color8 } }
  .icon-color-9{ .iconfont{  color:$icon_color9 } }
}
.index-title{
  font-size:16px;
  line-height:32px;
  background:#fff;
  padding:10px;
  border-bottom:1px solid #e8e8e8;
  border-top:15px solid #e8e8e8;
  .sub{
    font-size:12px;
    color:#989898;
    float: right;
  }
  &:after{
    display:block;content:'';height:0;overflow:hidden;clear:both;
  }
}
.m-head-box{
  height:40px;
  padding:5px;
  position:relative;
  border-bottom:1px solid #e8e8e8;
  overflow: hidden;
  background:#fff;
  .left-link,.right-link{
    display:block;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    position:absolute;
    top:5px;
    left:5px;
    .iconfont{
      font-size:18px;
      color:#989898;
    }
  }
  .right-link{
    left:auto;
    right:5px;
  }
  .title{
    padding:0 50px;
    font-size:16px;
    font-weight:500;
    line-height:40px;
    text-align:center;
    overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
  }
  .head-img{
    height:36px;
    display:block;
    margin:2px auto;
  }
}
.head-fixed{
  position:fixed;
  width:100%;
  height:50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top:0;
  left:0;
  background:#fff;
  z-index:9;

}
.driver-item{
  padding:10px;
  border-bottom:15px solid #e8e8e8;
  &:after{
    display:block;content:'';height:0;overflow:hidden;clear:both;
  }
  .driver-name{
    font-size:16px;line-height:30px;margin-bottom:10px;
    float: left;
    .driver-status{
      display:inline-block;
      width:60px;
      height:20px;
      text-align:center;
      line-height:20px;
      font-size:12px;
      border-radius:5px;
    }
    .driver-status0{
      background:#1aad19;
      color:#fff;
    }
    .driver-status2{
      background:#16c2c2;
      color:#fff;
    }
    .driver-status1{
      background:#ff0000;
      color:#fff;
    }
  }
  .mobile{
    font-size:14px;
    color:#989898;
    float:right;
    padding:5px 10px;
    border:1px solid #e8e8e8;
    border-radius:5px;
  }
}
.car-list-item{
  padding:10px;
  border-bottom:15px solid #e8e8e8;
  .car-info{
    position:relative;
    .car-sn{
      display:block;
      font-size:16px;
      color:#ff4400;
      font-weight:600;
    }
    .car-sn1{
      color:#0a8ddf;
    }
    .item-box{
      font-size:12px;color:#989898;
      line-height:30px;
      margin-right:10px;
    }
    .car-status{
      position:absolute;
      right:10px;
      width:60px;
      height:20px;
      text-align:center;
      line-height:20px;
      font-size:12px;
      border-radius:5px;
      top:0;
      right:10px;
    }
    .car-status0{
      background:#1aad19;
      color:#fff;
    }
    .car-status2{
      background:#16c2c2;
      color:#fff;
    }
    .car-status1{
      background:#ff0000;
      color:#fff;
    }
  }
  .order-info{
    padding:5px 0;
    border-top:1px solid #e8e8e8;
    font-size:14px;
    line-height:24px;
    color:#333;
    .tit{
      color:#989898;
    }
  }
}
.leave-item{
  position:relative;
  padding:10px;
  border-bottom:15px solid #e8e8e8;
  font-size:13px;
  line-height:24px;
  color:#989898;
  .name{
    font-size:16px;
    color:#333;
    display:block;
  }
  .action-link{
    display:block;
    width:60px;
    height:30px;
    text-align:center;
    line-height:30px;
    color:#fff;
    border-radius:5px;
    background:#989898;
    margin:2px;
    float:right;
  }
  .apply-1{
    background:#0BB20C;
  }
  .apply-2{
    background:#ff4400;
  }
  .apply-3{
    background:#0a8ddf;
  }
  &:after{
    display:block;content:'';height:0;overflow:hidden;clear:both;
  }
}
